<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import { reqUserOrderInfo, reqGetUser, reqOrderState, reqOrderInfo, reqCancelOrder, reqQrcode } from '@/api/user.ts'
import { useRouter } from 'vue-router'
import type { User, OrderState, OrderResponseData, } from '@/api/type.ts'
import PayOrder from '@/components/PayOrder.vue'
const router = useRouter()
const currentPage = ref(1)
const pageSize = ref(10)
const totalNum = ref(0)
const patientId = ref("")
const orderStatus = ref("")
const orderList = ref([])
async function getOrderInfo() {
    const res = await reqUserOrderInfo(currentPage.value, pageSize.value, patientId.value, orderStatus.value)
    orderList.value = res.data.records
    totalNum.value = res.data.total
    // console.log(orderList.value)
}
getOrderInfo()
const patientList = ref<User[]>([])
const getPatientList = async () => {
    const res = await reqGetUser()
    // console.log(res)
    patientList.value = res.data
    // console.log(patientList.value)
}
getPatientList()
const statusList = ref<OrderState[]>([])
const getOrderStatus = async () => {
    const res = await reqOrderState()
    // console.log(res)
    statusList.value = res.data
    // console.log(statusList.value)
}
getOrderStatus()
const handleSizeChange = (val: number) => {
    // console.log(`每页 ${val} 条`)
    pageSize.value = val
    getOrderInfo()
}
const handleCurrentChange = (val: number) => {
    // console.log(`当前${val}页 `)
    currentPage.value = val
    getOrderInfo()
}
const orderDetail = ref<any>({})
const getOrderDetail = async () => {
    const res: OrderResponseData = await reqOrderInfo(router.currentRoute.value.query.orderId as string)
    // console.log(res)
    orderDetail.value = res.data
}
// onMounted(() => {
//     if (router.currentRoute.value.query.orderId) {
//         getOrderDetail()
//     }
// })
watch(() => router.currentRoute.value.query.orderId, (newVal) => {
    if (newVal !== undefined) {
        getOrderDetail()

    }

})
const cancelOrder = async () => {
    const res = await reqCancelOrder(orderDetail.value.id)
    // console.log(res)
    getOrderDetail()
}
const dialogFormVisible = ref(false)
const payOrder = ref()
const openDialog = () => {
    payOrder.value.changeDialogFormVisible(true)
}
</script>

<template>
    <div class="order-container">
        <template v-if="router.currentRoute.value.query.orderId">
            <h3>挂号详情</h3>
            <div style="margin: 30px 0;display: flex;justify-content: space-between;">
                <span>{{ orderDetail.param?.orderStatusString }}</span>
                微信关注 “北京114预约挂号” 快速预约挂号
            </div>
            <div class="flex-content">
                <div>
                    <el-descriptions title="实名信息" :column="1" size="default" border label-width="120px">
                        <el-descriptions-item label="就诊人信息">{{ orderDetail.patientName }}</el-descriptions-item>
                        <el-descriptions-item label="就诊日期">{{ orderDetail.reserveDate }}</el-descriptions-item>
                        <el-descriptions-item label="就诊医院">{{ orderDetail.hosname }}</el-descriptions-item>
                        <el-descriptions-item label="就诊科室">{{ orderDetail.depname }}</el-descriptions-item>
                        <el-descriptions-item label="医生职称">{{ orderDetail.title }}</el-descriptions-item>
                        <el-descriptions-item label="医事服务费">{{ orderDetail.amount }}</el-descriptions-item>
                        <el-descriptions-item label="挂号单号">{{ orderDetail.outTradeNo }}</el-descriptions-item>
                        <el-descriptions-item label="挂号时间">{{ orderDetail.createTime }}</el-descriptions-item>
                    </el-descriptions>
                    <el-popconfirm class="box-item" title="确定取消预约吗？" placement="top" width="200px"
                        @confirm="cancelOrder">
                        <template #reference>
                            <el-button>取消预约</el-button>
                        </template>
                    </el-popconfirm>
                    <el-button type="primary" @click="openDialog">支付</el-button>
                </div>

                <div class="txt-notice">
                    <h3>注意事项</h3>
                    <p>1.请确认就诊人信息是否准确，若填写错误将无法取号就诊，损失由本人承担；</p>

                    <p style="color: red;">2.【取号】就诊当天需在{{ orderDetail.fetchTime }} 在医院取号，未取号视为爽约，该号不退不换；</p>

                    <p>3.【退号】在{{ orderDetail.quitTime }}前可在线退号 ，逾期将不可办理退号退费；</p>

                    <p>4.北京114预约挂号支持自费患者使用身份证预约，同时支持北京市医保患者使用北京社保卡在平台预约挂号。请于就诊当日，携带预约挂号所使用的有效身份证件到院取号；</p>

                    <p>5.请注意北京市医保患者在住院期间不能使用社保卡在门诊取号。</p>
                </div>
            </div>

        </template>
        <template v-else>
            <h3>挂号订单</h3>
            <el-form>
                <el-form-item label="就诊人">
                    <el-select v-model="patientId" placeholder="请选择全部就诊人" style="width: 240px" @change="getOrderInfo">
                        <el-option value="" label="请选择全部就诊人"></el-option>
                        <el-option v-for="item in patientList" :key="item.id" :label="item.name"
                            :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="订单状态">
                    <el-select v-model="orderStatus" placeholder="全部订单" style="width: 240px" @change="getOrderInfo">
                        <el-option value="" label="全部订单"></el-option>
                        <el-option v-for="item in statusList" :key="item.status" :label="item.comment"
                            :value="item.status"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <el-table :data="orderList" border style="width: 100%">
                <el-table-column prop="reserveDate" label="就诊时间" />
                <el-table-column prop="hosname" label="医院" />
                <el-table-column prop="depname" label="科室" />
                <el-table-column prop="title" label="医生" />
                <el-table-column prop="amount" label="服务费" />
                <el-table-column prop="patientName" label="就诊人" />
                <el-table-column prop="param" label="订单状态">
                    <template #default="scope">
                        {{ scope.row.param.orderStatusString }}
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="操作">
                    <template #default="scope">
                        <button @click="router.push('/user/order?orderId=' + scope.row.id)"
                            style="border: none;background-color: inherit;color: var(--theme-color);">详情</button>
                    </template>
                </el-table-column>

            </el-table>
        </template>

    </div>
    <!-- 分页器 -->
    <el-pagination v-if="!router.currentRoute.value.query.orderId" v-model:current-page="currentPage"
        v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 40]" size="default"
        layout=" prev, pager, next, jumper,total, sizes" :total="totalNum" @current-change="handleCurrentChange"
        @size-change="handleSizeChange" />
    <PayOrder ref="payOrder" />
</template>

<style scoped lang="scss">
.order-container {
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 20px;

    h3 {
        margin-bottom: 20px;
        font-size: 16px;
        padding-bottom: 10px;
        border-bottom: 1px solid var(--border-color);
    }

    .el-form {
        display: flex;
        justify-content: space-around;

        .el-form-item {
            width: 46%;
        }
    }



    .el-table {
        margin-top: 20px;
    }

    .flex-content {
        display: flex;

        .el-descriptions {
            width: 300px;
            margin-bottom: 10px;
        }

        .txt-notice {
            flex: 1;
            margin: 30px 40px 0;
            padding: 20px;
            border: 1px solid var(--border-color);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

            p {
                margin-bottom: 20px;
                font-size: 16px;
            }
        }
    }



}

.el-pagination {
    margin: 10px 0;
}
</style>